<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-11 14:38:41
-->
<template>
  <div class="container">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-if="list.length">
        <div
          class="list_item"
          v-for="item in list"
          :key="item.questionId"
          @click="handleDetail(item)"
        >
          <div class="header">
            <van-image
              :src="item.headUrl"
              width="30"
              height="30"
              round
              fit="contain"
            />
            <div class="left">
              <span
                >{{ item.spcolumnUserName }} ·
                <span style="color:#3eadee">
                  {{ filterQueStatus(item.whetherAnswer) }}
                </span></span
              >
              <i> {{ item.qualificationName }} </i>
              <van-rate
                class="rete"
                v-model="item.starEva"
                size="12"
                color="#ee8c0a"
              />
            </div>
          </div>
          <div class="content">
            {{ item.questionContent }}
          </div>
          <div class="footer">
            <span>{{ item.nick }} · 提问 · {{ item.createTime }}</span>
            <span class="watchPrice" v-if="item.payedStatus != 1"
              >{{ item.watchPrice }}金石围观</span
            >
            <span class="watchPrice" v-else style="color: #ff8800">已围观</span>
          </div>
        </div>
      </div>
      <van-empty v-else description="暂无数据"> </van-empty>
    </van-list>
  </div>
</template>


<script>
import { defineComponent, reactive, ref } from "vue";
import { ApiGetQuesList } from "@/api/ques";
import { useRouter } from "vue-router";
import filter from "@/utils/filter";
export default defineComponent({
  setup() {
    const { filterQueStatus } = filter();


    const loading = ref(false);
    const finished = ref(false);
    const list = ref([]);

    const query = reactive({
      pageIndex: 0,
      pageSize: 10,
    });
    const onLoad = async () => {
      query.pageIndex++;
      const res = await ApiGetQuesList(query);
      if (res) {
        res.forEach((el) => (el.starEva = parseInt(el.starEva)));
        list.value = list.value.concat(res);
        loading.value = false;
        if (res.length <= 0) {
          finished.value = true;
        } else {
          finished.value = false;
        }
      }
    };


    const router = useRouter()
    const handleDetail = (item)=>{
      router.push({
        path:'/quesdetail',
        query:{
          id:item.questionId,
          tab:'center',
          from:'/ques'
        }
      })
    }
    return {
      list,
      loading,
      finished,
      filterQueStatus,
      onLoad,
      handleDetail
    };
  },
});
</script>


<style lang="scss" scoped>
.list_item {
  font-size: 12px;
  height: 100px;
  border-bottom: 8px solid #f2f4f5;
  padding: 5px 15px;
  padding-top: 8px;
  .header {
    display: flex;
    align-items: center;
    .left {
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      position: relative;
      width: 100%;
      span {
        font-size: 14px;
        color: #313131;
        span {
          font-size: 10px;
        }
      }
      i {
        font-size: 10px;
        color: #666;
        margin-top: 5px;
      }
      .rete {
        position: absolute;
        right: 0;
        top: 8px;
      }
    }
  }
  .content {
    font-size: 16px;
    font-weight: bolder;
    margin: 12px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #242323de;
  }
  .footer {
    font-size: 12px;
    color: #666;
    position: relative;
    .watchPrice {
      position: absolute;
      right: 0;
    }
  }
}
</style>